- add_page_specific_style 'page_bundles/commit_description'

.page-content-header
  .header-main-content
    - if @commit.has_signature?
      = render partial: 'signature', object: @commit.signature
    %strong
      #{ s_('CommitBoxTitle|Commit') }
      %span.commit-sha{ data: { testid: 'commit-sha-content' } }= @commit.short_id
    = clipboard_button(text: @commit.id, title: _('Copy commit SHA'))
    %span.gl-hidden{ class: "@sm/panel:gl-inline" }= _('authored')
    #{time_ago_with_tooltip(@commit.authored_date)}
    %span= s_('ByAuthor|by')
    %strong
      = author_avatar(@commit, size: 24, has_tooltip: false)
      = commit_author_link(@commit, avatar: true, size: 24)
    = user_status(@commit.author)
    - if @commit.different_committer?
      %span.gl-text-subtle= _('Committed by')
      = commit_committer_link(@commit, avatar: true, size: 24)
      #{time_ago_with_tooltip(@commit.committed_date)}

  = link_button_to _('Browse files'), project_tree_path(@project, @commit), class: 'gl-mr-3 gl-w-full @sm/panel:gl-w-auto gl-mb-3 @sm/panel:gl-mb-0'
  #js-commit-options-dropdown{ data: commit_options_dropdown_data(@project, @commit) }

.commit-box{ data: { project_path: project_path(@project) } }
  = render ::Layouts::PageHeadingComponent.new(markdown_field(@commit, :title), options: { class: 'commit-title'}) do |c|
    - if @commit.description.present?
      - c.with_description do
        %pre.commit-description<
          = preserve(markdown_field(@commit, :description))

.info-well
  .well-segment
    .icon-container.commit-icon
      = sprite_icon('commit', variant: 'default')
    %span.gl-text-default= n_('parent', 'parents', @commit.parents.count)
    - @commit.parents.each do |parent|
      = link_to parent.short_id, project_commit_path(@project, parent), class: "commit-sha"
  #js-commit-branches-and-tags.gl-border-t.gl-border-t-section{ data: { full_path: @project.full_path, commit_sha: @commit.short_id } }
    .well-segment
      = sprite_icon('branch', variant: 'default', css_class: "gl-ml-2 gl-mr-3")
      = gl_loading_icon(inline: true, css_class: 'gl-align-middle')
    .well-segment
      = sprite_icon('tag', variant: 'default', css_class: "gl-ml-2 gl-mr-3")
      = gl_loading_icon(inline: true, css_class: 'gl-align-middle')

  .well-segment.merge-request-info
    .icon-container
      = sprite_icon('merge-request', variant: 'default')
    %span.commit-info#js-commit-merge-requests{ 'data-project-commit-path' => merge_requests_project_commit_path(@project, @commit.id, format: :json) }
      = gl_loading_icon(inline: true, css_class: 'gl-align-middle')

  - if can?(current_user, :read_pipeline, @last_pipeline)
    .well-segment
      #js-commit-box-pipeline-summary{ data: { full_path: @project.full_path, iid: @last_pipeline.iid, graphql_resource_etag: graphql_etag_pipeline_path(@last_pipeline) } }
        = sprite_icon('pipeline', variant: 'default', css_class: "gl-ml-2 gl-mr-3")
        = gl_loading_icon(inline: true, css_class: 'gl-align-middle')

  - if @merge_request
    .well-segment
      = sprite_icon('information-o', variant: 'default', css_class: '!gl-align-middle gl-mr-2')

      - link_to_merge_request = link_to(@merge_request.to_reference, diffs_project_merge_request_path(@project, @merge_request, commit_id: @commit.id))
      = _('This commit is part of merge request %{link_to_merge_request}. Comments created here will be created in the context of that merge request.').html_safe % { link_to_merge_request: link_to_merge_request }
